<template>
  <view class="loading-more" :class="`status-${status}`">
    <!-- 加载中状态 -->
    <view v-if="status === 'loading'" class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-dot" v-for="i in 3" :key="i" :style="{ animationDelay: (i - 1) * 0.2 + 's' }"></view>
      </view>
      <text class="loading-text">{{ loadingText }}</text>
    </view>
    
    <!-- 可以加载更多状态 -->
    <view v-else-if="status === 'more'" class="more-content" @tap="handleLoadMore">
      <text class="more-text">{{ moreText }}</text>
      <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
    </view>
    
    <!-- 没有更多数据状态 -->
    <view v-else-if="status === 'noMore'" class="no-more-content">
      <view class="divider-line"></view>
      <text class="no-more-text">{{ noMoreText }}</text>
      <view class="divider-line"></view>
    </view>
    
    <!-- 加载失败状态 -->
    <view v-else-if="status === 'error'" class="error-content" @tap="handleRetry">
      <uni-icons type="refresh" size="20" color="#ff4757"></uni-icons>
      <text class="error-text">{{ errorText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoadingMore',
  props: {
    // 加载状态: loading, more, noMore, error
    status: {
      type: String,
      default: 'more',
      validator: (value) => ['loading', 'more', 'noMore', 'error'].includes(value)
    },
    // 自定义文本
    loadingText: {
      type: String,
      default: '加载中...'
    },
    moreText: {
      type: String,
      default: '点击加载更多'
    },
    noMoreText: {
      type: String,
      default: '没有更多数据了'
    },
    errorText: {
      type: String,
      default: '加载失败，点击重试'
    },
    // 是否显示组件
    show: {
      type: Boolean,
      default: true
    },
    // 组件高度
    height: {
      type: String,
      default: '100rpx'
    }
  },
  
  methods: {
    handleLoadMore() {
      if (this.status === 'more') {
        this.$emit('loadmore')
      }
    },
    
    handleRetry() {
      if (this.status === 'error') {
        this.$emit('retry')
      }
    }
  }
}
</script>

<style scoped>
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  min-height: 100rpx;
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  display: flex;
  align-items: center;
  margin-right: 15rpx;
}

.spinner-dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background-color: #ff4757;
  margin: 0 3rpx;
  animation: spinner-bounce 1.4s ease-in-out infinite both;
}

@keyframes spinner-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-text {
  font-size: 26rpx;
  color: #999;
}

.more-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border-radius: 8rpx;
  background-color: #f8f8f8;
  transition: background-color 0.3s;
}

.more-content:active {
  background-color: #f0f0f0;
}

.more-text {
  font-size: 26rpx;
  color: #666;
  margin-right: 10rpx;
}

.no-more-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.divider-line {
  flex: 1;
  height: 1rpx;
  background-color: #e0e0e0;
}

.no-more-text {
  font-size: 24rpx;
  color: #ccc;
  margin: 0 30rpx;
  white-space: nowrap;
}

.error-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  border-radius: 8rpx;
  background-color: #fff5f5;
  border: 1px solid #ffebee;
  transition: background-color 0.3s;
}

.error-content:active {
  background-color: #ffebee;
}

.error-text {
  font-size: 26rpx;
  color: #ff4757;
  margin-left: 10rpx;
}

/* 不同状态的样式 */
.status-loading {
  pointer-events: none;
}

.status-more {
  cursor: pointer;
}

.status-noMore {
  pointer-events: none;
}

.status-error {
  cursor: pointer;
}

/* 隐藏状态 */
.loading-more[v-show="false"] {
  display: none;
}

/* 紧凑模式 */
.loading-more.compact {
  padding: 20rpx;
  min-height: 60rpx;
}

.compact .loading-text,
.compact .more-text,
.compact .error-text {
  font-size: 24rpx;
}

.compact .no-more-text {
  font-size: 22rpx;
}

.compact .spinner-dot {
  width: 6rpx;
  height: 6rpx;
}

/* 大尺寸模式 */
.loading-more.large {
  padding: 40rpx;
  min-height: 120rpx;
}

.large .loading-text,
.large .more-text,
.large .error-text {
  font-size: 28rpx;
}

.large .no-more-text {
  font-size: 26rpx;
}

.large .spinner-dot {
  width: 10rpx;
  height: 10rpx;
}
</style>